/*
* @Author: zhangsai
* @Date: 2018/2/7
* @Last Modified by: zhangsai
* @Last Modified time: 2018/2/7
* @description: 个人中心
*/
<template>
    <div>
        <div class="right">
            <div class="ca-box ca-m-t-30 ca-pc-head">
                <div class="clearfix">
                    <div class="ca-pc-title pull-left">个人资料</div>
                    <span @click="isEdit = true" v-if="!isEdit">
                        <i class="ca-edit-btn ca-pull-right el-icon-edit">编辑</i>
                    </span>
                </div>
                <el-row class="ca-m-t-20">
                    <el-col :span="8" class="ca-align-center ca-pc-head-line">
                        <csLogoImg :item="headImg" v-if="!isEdit" type="personal" ></csLogoImg>
                        <csLogoImgEdit :item="headImg" v-if="isEdit" type="personal" @getId="getHeadImgId" ></csLogoImgEdit>
                    </el-col>
                    <el-col :span="16">
                        <el-form :model="userInfo" label-width="100px" class="ca-pc-el-form" ref="ruleForm" :rules="rules">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item
                                        class="ca-pc-el-form-item"
                                        prop="cnName"
                                        label="用户名称:">
                                        <span>{{userInfo.cnName}}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        class="ca-pc-el-form-item"
                                        prop="enName"
                                        label="英文名称:">
                                        <span v-if="!isEdit">{{userInfo.enName}}</span>
                                        <el-input v-if="isEdit" v-model="userInfo.enName" size="small"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item
                                        class="ca-pc-el-form-item"
                                        prop="telephone"
                                        label="移动电话:">
                                        <span v-if="!isEdit">{{userInfo.telephone}}</span>
                                        <el-input v-if="isEdit" v-model="userInfo.telephone" size="small"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" class="text-overflow" :title="userInfo.email">
                                    <el-form-item
                                        class="ca-pc-el-form-item"
                                        prop="email"
                                        label="电子邮箱:"
                                    >
                                        <span>{{userInfo.email}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                            <el-col :span="12" class="text-overflow" :title="currentRoles.join('、')">
                                <el-form-item
                                    class="ca-pc-el-form-item"
                                    label="角色身份:"
                                >
                                    <span>{{currentRoles.join('、')}}</span>
                                </el-form-item>

                            </el-col>
                            <el-col :span="12">
                                <el-form-item
                                    class="ca-pc-el-form-item"
                                    label="部门:"
                                >
                                    <span>{{userInfo.deptName}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="ca-align-center ca-m-b-10" v-if="isEdit">
                    <el-button type="primary" @click="submitForm('ruleForm')">确 认</el-button>
                    <el-button type="default" @click="resetForm('ruleForm')">取 消</el-button>
                </div>
            </div>
            <div class="ca-box ca-m-t-20 ca-pc-main ca-p-20">
                <el-tabs v-model="activeTabs" @tab-click="handleClick">
                    <el-tab-pane name="0">
                        <span slot="label">
                            我的任务
                            <span class="ca-color-danger ca-msg--notice"
                                  v-show="count.taskCount != 0">（{{count.taskCount}}）</span>
                        </span>
                        <!-- 新建日程 -->
                        <div class="ca-m-t-15" v-show="newSchedule">
                            <el-form label-width="80px" :model="createParams" ref="ruleFormTask" :rules="rulesTask" >
                                <el-row>
                                    <el-col :span="10">
                                        <el-form-item label="开始日期" prop="startTime">
                                            <el-date-picker v-model="createParams.startTime"
                                                            :editable="false"
                                                            type="date" placeholder="选择日期" style="width: 350px"></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10" :offset="1">
                                        <el-form-item label="截止日期" prop="enTime">
                                            <el-date-picker v-model="createParams.enTime"
                                                            :editable="false"
                                                            type="date" placeholder="选择日期" style="width: 350px"></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="10">
                                        <el-form-item label="参与人" prop="userIdList">
                                            <el-select
                                                v-model="createParams.userIdList"
                                                multiple
                                                filterable
                                                remote
                                                placeholder="请输入关键词"
                                                :remote-method="getUserList"
                                                :loading="loading" style="width: 350px">
                                                <el-option
                                                    v-for="item in userList"
                                                    :key="item.id"
                                                    :label="item.userName"
                                                    :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10" :offset="1">
                                        <el-form-item label="重要性">
                                            <el-select v-model="createParams.importance" placeholder="请选择" style="width: 350px">
                                                <el-option
                                                    v-for="item in importanceList"
                                                    :label="item.name"
                                                    :value="item.id" :key="item.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="21">
                                        <el-form-item label="日程描述">
                                            <el-input
                                                type="textarea"
                                                :autosize="{ minRows: 5, maxRows: 7}"
                                                placeholder="请输入内容"
                                                :maxlength="3000"
                                                v-model="createParams.content">
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="ca-align-center ca-m-t-10 ca-m-b-10">
                                            <el-button type="primary" class="ca-btn__confirm"
                                                       :disabled="createLoading"
                                                       @click="submitFormTask('ruleFormTask')">确 认</el-button>
                                            <el-button type="default"
                                                       class="ca-btn__cancel"
                                                       @click="cancelClear('ruleFormTask')">取 消</el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                        <!-- 新建日程 end -->
                        <!-- 日历 or 任务列表-->
                        <div v-show="!newSchedule">
                            <el-row>
                                <el-col :span="8">
                                    <caCalendar ref="child1" :remindAll="remindAll2" :events="fcEvents"
                                                first-day='1' lang="zh"
                                                @dayClick="getSchedule">
                                        <template slot="fc-event-card" slot-scope="p">
                                            <p><i class="fa">sadfsd</i> {{ p.event.title }} test</p>
                                        </template>
                                    </caCalendar>
                                </el-col>
                                <el-col :span="16" class="ca-p-20">
                                    <div>
                                        <div class="clearfix">
                                            <div class="pull-left ca-pc-icon-list ca-m-t-5">
                                                <span><i class="ca-task-ok"></i>未完成</span>
                                                <span><i class="ca-task-no"></i>已完成</span>
                                                <span><i class="ca-task-hand-up"></i>已挂起</span>
                                                <span><i class="ca-task-overdue"></i>已逾期</span>
                                            </div>
                                            <button type="text"
                                                    class="ca-btn ca-btn-default ca-tp-8 ca-pc-create-btn pull-right"
                                                    @click="newSchedule = true">
                                                <img src="~__assets/images/xinjian-Icon.png" />
                                                <span>新建任务</span></button>
                                        </div>
                                    </div>
                                    <div v-if="myScheduleList.length === 0">
                                        <img src="~__assets/images/zw.gif" class="ca-pc-noSchedule" />
                                    </div>
                                    <div v-else>
                                        <el-row :key="item.id"
                                                v-for="item in myScheduleList"
                                                class="ca-pc-sd-list ca-leng-28 ca-m-b-10 ca-p-t-10">
                                            <el-col :span="24" class="ca-personal__text ca-font-size-14 ca-c333 ca-word-break" :title="item.context">
                                                <span>{{item.startTime | moment('YYYY-MM-DD')}}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{item.content}}
                                            </el-col>
                                            <el-col :span="6" class="ca-font-size-14 ca-c333">
                                                <span class="ca-c666">发起人：</span>{{item.createUserName}}
                                            </el-col>
                                            <el-col :span="4" class="ca-font-size-14 ca-c333">
                                                <span class="ca-c666">重要性：</span>{{item.importance | csConstFilter('IMPORTANT') }}
                                            </el-col>
                                            <el-col :span="6" class="ca-font-size-14 ca-c333">
                                                <span class="ca-c666">截止时间：</span>{{item.enTime | moment("YYYY-MM-DD")}}
                                            </el-col>
                                            <!--  发起者不显示完成和挂起按钮, 如果是参与者并且参与者当前状态是已完成 也不显示完成和挂起按钮 逾期的任务不可以挂起 -->
                                            <el-col :span="6"
                                                    v-if="item.createUserId != userInfo.id && checkOption(item.scheduleUserVOs, true)">
                                                <el-button type="primary" size="small"
                                                           v-if="checkOption(item.scheduleUserVOs)"
                                                           @click="setScheduleStatus(2, item)"
                                                >
                                                    完成
                                                </el-button>
                                                <el-button type="primary" size="small"
                                                           v-if="checkOption(item.scheduleUserVOs)"
                                                           :disabled="checkOption(item.scheduleUserVOs, true, true)"
                                                           @click="setScheduleStatus(3, item)"
                                                >
                                                    挂起
                                                </el-button>
                                            </el-col>
                                            <!--  只有发起者可以删除  -->
                                            <el-col :span="2">
                                                <el-button type="danger" size="small"
                                                           v-if="item.createUserId == userInfo.id"
                                                           @click="deleteSchedule(item)"
                                                >
                                                    删除
                                                </el-button>
                                            </el-col>
                                            <el-col :span="24">
                                                <span class="ca-c666">参与人：</span>
                                                <!-- 未完成：  1  | 已完成： 2 | 挂起： 3 | 逾期: 4 -->
                                                <span v-for="v in item.scheduleUserVOs" class="ca-m-r-10 ca-font-size-14 ca-c333">
                                                     <i class="ca-task-ok" v-if="v.status == 1"></i>
                                                     <i class="ca-task-no" v-if="v.status == 2"></i>
                                                     <i class="ca-task-hand-up" v-if="v.status == 3"></i>
                                                     <i class="ca-task-overdue" v-if="v.status == 4"></i>
                                                    {{v.userName}}
                                                </span>&nbsp;&nbsp;
                                            </el-col>
                                        </el-row>
                                        <div class="ca-m-t-20 clearfix" v-if="myScheduleList.length > 0">
                                            <el-pagination
                                                class="pull-right"
                                                @current-change="handleCurrentChange"
                                                :current-page="params.pageIndex"
                                                :page-size="5"
                                                layout="total, prev, pager, next, jumper"
                                                :total="total">
                                            </el-pagination>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <!-- 日历 or 任务列表   end-->
                    </el-tab-pane>
                    <el-tab-pane name="1">
                        <span slot="label">
                            协议审批
                        </span>
                        <caApproval></caApproval>
                    </el-tab-pane>
                    <el-tab-pane name="2">
                        <span slot="label">
                            消息通知
                            <span class="ca-color-danger ca-msg--notice"
                                  v-show="count.msgCount != 0">（{{count.msgCount}}）</span>
                        </span>
                        <caMessage @getCount="getCount" @activeTab="handleClick"></caMessage>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <!--修改密码-->
            <div class="ca-box ca-p-20 ca-m-t-15">
                <div class="ca-title clearfix">
                    <h3 class="ca-pull-left">账号安全</h3>
                    <div class="ca-pull-right">
                        <el-button @click="isChangePassword = true">
                            <i class="fa fa-edit ca-m-r-5"></i>
                            <span>修改密码</span>
                        </el-button>
                    </div>
                </div>
                <!--<el-row v-if="!isChangePassword">-->
                    <!--<el-col :span="24" class="ca-leng-28 ca-align-center">-->
                        <!--忘记密码请联系管理员：<br />-->
                        <!--电话号码： <span class="ca-foot&#45;&#45;margin">|</span> 邮箱地址：-->
                    <!--</el-col>-->
                <!--</el-row>-->
                <caChangePassword v-on:isClosePassword="isClosePassword" :isChangePassword="isChangePassword"></caChangePassword>
            </div>
            <!--修改密码 end-->
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import { api } from './api';
    import { STATUS_HTTP_SUCCESS, apiHttp } from '__service/csHttp';
    const CREATE_PARAMS = {
            startTime: '',
            enTime: '',
            importance: '',
            userIdList: [],
            content: ''
        };
    export default {
        data() {
            let currentRoles = this.$store.state.user.currentRoles && this.$store.state.user.currentRoles.map(item => {
                    return item.roleName
                });
            let validatePhone = (rule, value, callback) => {
                if (/^1[0-9]{10}$/.test(value) === false) {
                    callback(new Error('手机号码格式不正确'));
                } else {
                    callback();
                }
            };
            let rules = {
                telephone: [
                    {validator: validatePhone, trigger: 'blur'}
                ]
            };
            let validateEndTime = (rule, value, callback) => {
                let startTime = this.createParams.startTime && new Date(this.createParams.startTime).getTime();
                let endTime = value && new Date(value).getTime();
                if (!endTime) {
                    callback(new Error('请选择截止日期'));
                }
                if (startTime > endTime) {
                    callback(new Error('截止日期不能比开始日期大'));
                } else {
                    callback();
                }
            }
            let rulesTask = {
                startTime: [
                    { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
                ],
                enTime: [
                    { type: 'date', required: true, validator: validateEndTime, trigger: 'change' }
                ],
                userIdList: [
                    { type: 'array', required: true, message: '参与人不能为空', trigger: 'change' }
                ],
            };
            return {
                userInfo: this.$store.state.user,
                headImg: {
                    itemImg: this.$store.state.user.headImg.imgId
                },
                isEdit: false,
                currentRoles: currentRoles,
                activeTabs: this.$route.params.tabIndex.toString() || '0',
                newSchedule: false,
                chooseDay: new Date(),
                params: {
                    time: '',
                    pageIndex: 1,
                    pageSize: 5
                },
                total: 0,
                remindAll2: [],  //所有新建的日程副本
                fcEvents: [],

                // 任务列表
                myScheduleList: [],
                // 参与人列表
                userList: [],
                // 重要性 列表
                importanceList: this.$store.state.csConst.IMPORTANT,
                // 新建日程参数
                createParams: {
                    startTime: '',
                    enTime: '',
                    importance: '',
                    userIdList: [],
                    content: ''
                },
                loading: false,
                createLoading: false,
                isChangePassword: false,
                // 红点统计数量
                count: {
                    taskCount: 0, // 我的任务
                    msgCount: 0, // 消息通知
                },
                userId: this.$store.state.user.id,
                rules: rules,
                rulesTask: rulesTask
            }
        },
        watch: {
        },
        props: {},
        mounted() {
            this.getSchedule(this.chooseDay);
            this.getSchedule('all');
        },
        methods: {
            // 获取消息 任务 数量
            async getCount() {
                let resData = await apiHttp(api.GET_MESSAGE_COUNT);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    this.count = {...resData.data};
                    this.$store.dispatch('getMsg'); // 更新菜单个人中心的消息数量
                }
            },
            // 上传头像 获取imgId
            getHeadImgId(id) {
                this.headImg.itemImg = id;
            },
            // 保存个人信息
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.savePersonalInfo();
                    }
                })
            },
            async savePersonalInfo() {
                let params = {
                    id: this.userInfo.id,
                    name: this.userInfo.enName,
                    tel: this.userInfo.telephone,
                    headPicture: this.headImg.itemImg
                };
                let resData = await apiHttp(api.SET_PERSONAL_INFO, params);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    this.$message.success('保存成功');
                    this.$store.dispatch('refreshFieldList');
                    this.$store.dispatch('getMsg');
                    this.isEdit = false;
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.isEdit = false;
            },
            // 切换tab
            handleClick(tab) {
                this.activeTabs = tab.index;
            },
            submitFormTask(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.createNewSchedule();
                    }
                })
            },
            // 创建日程
            async createNewSchedule() {
                let params = this.createParams;
                params.startTime = params.startTime === '' ? '' : this.$moment(params.startTime).format('YYYY-MM-DD');
                params.enTime = params.enTime === '' ? '' : this.$moment(params.enTime).format('YYYY-MM-DD');
                this.createLoading = true;
                let resData = await apiHttp(api.CREATE_SCHEDULE, params);
                this.createLoading = false;
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    this.$message.success('创建成功');
                    this.newSchedule = false;
                    this.createParams = Object.assign({}, CREATE_PARAMS);
                    this.getSchedule('all');
                    this.getSchedule(new Date());
                }
            },
            // 取消
            cancelClear(formName) {
                this.createParams = {
                    startTime: '',
                    enTime: '',
                    importance: '',
                    userIdList: [],
                    content: ''
                }
                this.$refs[formName].resetFields();
                this.newSchedule = false;
            },
            // 获取日程
            async getSchedule(day) {
                let date = day === 'all' ? '' : day;
                if (date) {
                    this.chooseDay = date
                }
                this.params.time = date ? this.$moment(new Date(date)).format('YYYY-MM-DD') : '';
                if (day === 'all') {
                    this.params.pageSize = 10000
                } else {
                    this.params.pageSize = 5
                }
                let resData = await apiHttp(api.GET_MY_SCHEDULE_LIST, this.params);
                if (resData.resCode === STATUS_HTTP_SUCCESS) {
                    if (day === 'all') {
                        this.setArrayData(resData.data.resultData);
                    } else {
                        this.total = resData.data.totalCount;
                        this.myScheduleList = resData.data.resultData;
                    }
                }
            },
            // 设置日程
            setScheduleStatus(status, data) {
                let params = {
                    status: status,
                    scheduleId: data.id
                };
                let tip = status === 2 ? '确认完成此数据吗?' : '确认挂起此数据吗?';
                this.$confirm(tip, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( async () => {
                    let resData = await apiHttp(api.SET_SCHEDULE, params);
                    if (resData.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message.success('设置成功');
                        this.getSchedule(this.chooseDay);
                        this.getSchedule('all');
                        this.getCount(); // 更新消息数量
                    }
                })
            },
            // 删除日程
            deleteSchedule(row) {
                let params = {
                    id: row.id
                };
                this.$confirm('确认删除此数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( async () => {
                    let resData = await apiHttp(api.DELETE_SCHEDULE, params);
                    if (resData.resCode === STATUS_HTTP_SUCCESS) {
                        this.$message.success('删除成功');
                        this.getSchedule(this.chooseDay);
                        this.getSchedule('all');
                        this.$store.dispatch('getMsg'); // 更新菜单个人中心的任务数量
                    }
                })
            },
            // 分页
            handleCurrentChange(pageIndex) {
                this.params.pageIndex = pageIndex;
                this.getSchedule(this.chooseDay);
            },
            // 模糊搜索 参与人 this.$store.state.user.department.userEntityList,
            getUserList(name) {
                if (name.length !== 0) {
                    let userEntityList = this.$store.state.user.department.userEntityList;
                    this.userList = userEntityList.filter( x => x.userName.indexOf(name) !== -1);
                }
            },
            // 关闭修改密码框
            isClosePassword() {
                this.isChangePassword = false;
            },
            // 此方法是专门用来处理任务日历显示状态用的
            // 未完成：  1  | 已完成： 2 | 挂起： 3 | 逾期: 4
            // 最终状态  true  全部已完成   否则  false
            setArrayData(data) {
                let allData = data || [];
                let startTimeData = [];
                allData.map(item => {
                    let startTimeFindIndex = startTimeData.findIndex(x => x.date === item.startTime);
                    // 如果当前登录用户是发起人
                    if (item.createUserId === this.userId) {
                        let Completed = item.scheduleUserVOs.filter((x) => x.status === 2);
                        if (Completed.length === item.scheduleUserVOs.length) {
                            if (startTimeFindIndex === -1) {
                                startTimeData.push({
                                    date: item.startTime,
                                    status: [2],
                                })
                            } else {
                                startTimeData[startTimeFindIndex].status.push(2);
                            }
                             // 显示 已完成
                        } else {
                            if (startTimeFindIndex === -1) {
                                startTimeData.push({
                                    date: item.startTime,
                                    status: [1]
                                })
                            } else {
                                startTimeData[startTimeFindIndex].status.push(1);
                            }
                            // 显示 未完成
                        }
                    } else { // 当前登录用户是参与人
                        let stateList = item.scheduleUserVOs.filter((x) => x.userId === this.userId);
                        if (stateList.length > 0) {
                            if (startTimeFindIndex === -1) {
                                startTimeData.push({
                                    date: item.startTime,
                                    status: [stateList[0].status]
                                })
                            } else {
                                startTimeData[startTimeFindIndex].status.push(stateList[0].status);
                            }
                        }
                    }
                })
                startTimeData.map(item => {
                    item.date = item.date ? this.$moment(new Date(item.date)).format('YYYY-MM-DD') : '';
                    let s = item.status.filter(x => x === 2);
                    item.status = s.length === item.status.length;
                    return item;
                })
                this.remindAll2 = startTimeData;
            },
            // 查看当前用户是否是参与人, flag为true时 返回 当前用户是否是参与人并且当前任务是否未完成
            checkOption(list, flag, isHang) {
                let index = list.findIndex((x) => x.userId === this.userInfo.id);
                let item = list.find((x) => x.userId === this.userInfo.id);
                if (isHang) {
                    return index !== -1 && item.status === 4;
                }
                if (flag) {
                    return index !== -1 && item.status !== 2;
                } else {
                    return index !== -1;
                }
            }

        },
        components: {
            'caCalendar': require('./full-calendar/fullCalendar'),                      // 日历
            'caApproval': require('./personal-approval'),                               // 审批
            'caMessage': require('./personal-message'),                                 // 消息
            'caChangePassword': require('./change-password'),                           // 修改密码
            'csLogoImg': require('__components/logo-img/index'),
            'csLogoImgEdit': require('__components/logo-img/edit'),
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .ca-pc-head{
        padding:28px 25px;
    }
    .ca-pc-title{
        color:#333;
        font-weight:normal;
        font-size:16px;
    }
    .ca-pc-inp{
        max-width:200px;
        line-height:28px;
    }
    .ca-pc-head-line{
        position:relative;
    }
    .ca-pc-head-line:after{
        content:'';
        position:absolute;
        width:1px;
        height:90%;
        top:5%;
        background:#ededed;
        right:0;
    }
    .ca-line-28{
        line-height:28px;
    }
    .ca-task-ok{padding:5px; background:#fb8560; display: inline-block; margin-right:3px;}
    .ca-task-no{padding:5px; background:#aec783; display: inline-block; margin-right:3px;}
    .ca-task-hand-up{padding:5px; background:#ccc; display: inline-block; margin-right:3px;}
    .ca-task-overdue{padding:5px; background:#f00; display: inline-block; margin-right:3px;}
    .ca-pc-noSchedule{
        width: 150px;
        margin:80px auto;
        display: block;
    }
    .ca-pc-create-btn{
        border:0;
        padding:0;
    }
    .ca-pc-create-btn img{
        vertical-align: middle;
        margin-right:3px;
        margin-top:-2px;
    }
    .ca-pc-icon-list span{
        margin-right:20px;
    }
    .ca-pc-icon-list span i{
        margin-right:5px;
    }
    .ca-pc-sd-list{
        border-top:1px dashed #eee;
    }
    .ca-pc-el-form-item{
        margin-bottom:0;
    }
    .ca-pc-el-form{
        margin-top:-10px;
    }

</style>
